<script setup lang="ts">
import { ref, watch } from 'vue'

import { useLayoutStore } from '@/stores/useLayout';
import Stage from './stage.vue';
import Layout from './layout.vue';
import Tmp from './tmp.vue';
import { postRequest, patchRequest } from '@/comm/request';
import { ElMessage } from 'element-plus'
import { getTmpObjects, getUrlParams } from '@/comm/tooler';


const layoutStore = useLayoutStore()

const onSave = () => {
  console.log(layoutStore.list)

  const id = getUrlParams("id");
  if(id){
    layoutStore.updatePage(id)
  }
  else{
    layoutStore.savePage()
  }
  
}

const onPreview = () => {
  console.log(layoutStore.list)
  layoutStore.changePreviewShow(true)
}

</script>
<template>
  <div class="mt-4">

    <Stage v-if="layoutStore.curItem.type == 'stage'"></Stage>
    <Layout v-if="layoutStore.curItem.type == 'layout'"></Layout>
    <Tmp v-if="layoutStore.curItem.type == 'tmp'"></Tmp>

    <div class="btns">
      <el-button @click="onPreview">预览</el-button>
      <el-button @click="onSave" type="primary">保存</el-button>
    </div>
  </div>
</template>

<style lang="less" scoped>
.btns {
  margin-top: 30px;
}
</style>